<template>
    <baidu-map :center="center"  class="map" :zoom="zoom" @ready="handler" ak="is0IbKSfy8fn90b4njtl58jTVHXdBnQ9">
            <!--缩放-->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
            <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{width:100,height:10}"></bm-city-list>
            <bm-context-menu>
              <bm-context-menu-item :callback="selectSite" text="选择此位置"></bm-context-menu-item>
            </bm-context-menu>
    </baidu-map>
</template>

<script>
	import {Api} from '@/api/index.js'
	import { sessionStorage } from '@/common/cacheUtils.js';
	import Vue from 'vue'
    import {BaiduMap,BmlMarkerClusterer,BmMarker,BmContextMenu,BmContextMenuItem,BmCityList} from 'vue-baidu-map'

    export default {
        components: {
            BmCityList,
            BmContextMenuItem,
            BaiduMap,
            BmlMarkerClusterer,
            BmMarker,
            BmContextMenu
        },
		data() {
			return {
                center: { lng: 116.404, lat: 39.915 },
                zoom:16,
                location: "北京市",
                keyword: "请输入搜索关键词",
                infoWindow:{
                    info:{}
                }
			}
		},
		mounted: function() {

		},
		methods: {
		    handler ({BMap, map}) {
		    this.BMap = BMap
            this.map = map
		      // 鼠标缩放
		      map.enableScrollWheelZoom(true);
            },
		    selectSite(e) {
              if (this.BMap) {
                  const that = this;
                  const geoCoder = new this.BMap.Geocoder()
                  geoCoder.getLocation(e.point, function(res) {
                     const addComp = res.addressComponents;
                     const addr = addComp.city  + addComp.district  + addComp.street + addComp.streetNumber;
                     that.infoWindow.info.siteName = addr;
                     that.infoWindow.info.xpos = e.point.lat;
                     that.infoWindow.info.ypos = e.point.lng;
                     that.$emit('getSelectPointData',that.infoWindow.info);
                  })
                }
            }
        }
	}
</script>
<style scoped>
    .map {
        width: 770px;
        height: 500px;
    }
</style>